<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- designer-manual.qdoc -->
  <title>使用布局 | Qt Designer 手册</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.14</a></td><td ><a href="qtdesigner-manual.html">Qt Designer 手册</a></td><td >使用布局</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtdesigner-manual.html">Qt 5.14.2 参考文档</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="designer-widget-mode.html" />
  <link rel="next" href="designer-connection-mode.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="designer-widget-mode.html">小部件编辑模式</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="designer-connection-mode.html">信号和槽编辑模式</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#setting-a-top-level-layout">设置顶层布局</a></li>
<li class="level1"><a href="#layout-objects">布局对象</a></li>
<li class="level1"><a href="#inserting-objects-into-a-layout">在布局中插入对象</a></li>
<li class="level1"><a href="#layout-types">布局类型</a></li>
<li class="level2"><a href="#horizontal-and-vertical-box-layouts">水平和垂直布局</a></li>
<li class="level2"><a href="#the-grid-layout">网格布局</a></li>
<li class="level2"><a href="#the-form-layout">窗体布局</a></li>
<li class="level2"><a href="#splitter-layouts">分裂器布局</a></li>
<li class="level1"><a href="#shortcut-keys">快捷键</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">使用布局</h1>
<span class="subtitle"></span>
<!-- $$$designer-layouts.html-description -->
<div class="descr"> <a name="details"></a>
<p>在使用窗体之前，需要将窗体上的对象放入布局中。这确保了当窗体被预览或在应用程序中使用时对象被正确显示。在布局中放置对象还可以确保它们在窗体调整大小时能够正确地调整大小。</p>
<p>一旦小部件被插入到布局中，就不可能单独移动和调整它们的大小，因为布局本身会控制其中每个小部件的几何形状。可以将 Spacers 添加到布局中，去影响小部件的几何形状。</p>
<p>布局可以嵌套以形成层次结构。例如，要实现具有水平行按钮的典型对话框布局，对话框元素可以使用垂直框布局和包含底部按钮的水平框布局。关于Qt布局系统的介绍，请参阅 <a href="../qtwidgets/layout.html">布局管理（Layout Management）</a> 。</p>
<p>要中断布局，请按 <b>Ctrl+0</b> 或从窗体的上下文菜单、<b>窗体</b> 菜单或主工具栏中选择 <b>打破布局（Break Layout）</b> 。</p>
<a name="setting-a-top-level-layout"></a>
<h2 id="setting-a-top-level-layout">设置顶层布局</h2>
<p>窗体的顶层布局可以通过清除选择(在窗体上单击鼠标左键)并应用布局来设置，见下图 。顶层布局是必要的，当窗口大小被调整时，小部件将正确地调整大小 。</p>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/designer-set-layout.png" alt="" /></td><td ><b>应用布局</b><p>要应用布局，您可以从左侧的工具栏或下面的上下文菜单中选择您选择的布局。</p>
</td></tr>
</table></div>
<p>同样，顶层布局也可分别在容器小部件( <a href="../qtwidgets/qgroupbox.html">QGroupBox</a> )或基于页面的容器小部件的页面( <a href="../qtwidgets/qtabwidget.html">QTabWidget</a>, <a href="../qtwidgets/qtoolbox.html">QToolBox</a> 和 <a
  href="../qtwidgets/qstackedwidget.html">QStackedWidget</a> )上设置。要使此操作成功，需要选用 Containers 内的小部件。</p>
  <p>在对象查看器中，顶层布局不作为单独的对象可见。它们的属性显示在属性编辑器中主窗体的小部件属性、容器小部件或容器小部件页面的下面。</p>
<p class="centerAlign"><img src="images/designer-set-layout2.png" alt="" /></p><a name="layout-objects"></a>
<h2 id="layout-objects">布局对象</h2>
<p>布局对象是通过将布局应用到一组现有对象而创建的。这是通过选择需要管理的对象，并使用主工具栏、<b>窗体(O)</b> 菜单或窗体上下文菜单应用标准布局之一来实现的。</p>
<p>布局对象由窗体上的红色框架表示，并在对象查看器中作为对象出现。它的属性(边距和约束)显示在属性编辑器中。</p>
<p>可以选择布局对象并将其与其他小部件和布局对象一起放置在另一个布局中，以构建布局层次结构。</p>
<p>当一个子布局对象被选中时，它的父布局对象可以在按下 <b>Shift</b> 键的同时点击子布局对象来选择。这使得在层次结构中选择特定的布局成为可能，否则由于框架太小而很难做到这一点。</p>
<a name="inserting-objects-into-a-layout"></a>
<h2 id="inserting-objects-into-a-layout">在布局中插入对象</h2>
<a name="insertingobjectsintoalayout"></a><p>通过将对象从当前位置拖放到所需位置，可以将对象插入到现有布局中。当一个对象在布局上拖动时，会在布局中显示一个蓝色光标，以指示将添加对象的位置。</p>
<p class="centerAlign"><img src="images/designer-layout-inserting.png" alt="" /></p><p class="figCaption">在布局中插入对象</p>
<a name="layout-types"></a>
<h2 id="layout-types">布局类型</h2>
<a name="horizontal-and-vertical-box-layouts"></a>
<h3 id="horizontal-and-vertical-box-layouts">水平和垂直布局</h3>
<p>在窗体上排列对象的最简单方法是将它们放置在水平（Horizontal layout）或垂直（vertical layout）布局中。水平布局确保部件内部水平对齐;垂直布局确保它们垂直对齐。</p>
<p>水平和垂直布局可以组合和嵌套到任何深度。但是，如果需要更多地控制对象的位置，可以考虑使用网格布局。</p>
<a name="the-grid-layout"></a>
<h3 id="the-grid-layout">网格布局</h3>
<p>通过在网格布局中放置对象，可以创建复杂的窗体布局。这种布局让窗体设计人员可以更自由地在窗体上安排小部件，但可能导致布局的灵活性大大降低。但是，对于某些类型的窗体布局，网格布局比水平和垂直布局的嵌套布局更适合。</p>
<a name="the-form-layout"></a>
<h3 id="the-form-layout">窗体布局</h3>
<p> <a href="../qtwidgets/qformlayout.html">QFormLayout</a> 类以两列形式管理小部件;左列保存标签，右列保存字段小部件，如行编辑、旋转框等。 <a href="../qtwidgets/qformlayout.html">QFormLayout</a> 类遵循各种平台外观指导原则，并支持对长行进行包装。</p>
<p class="centerAlign"><img src="images/designer-form-layout.png" alt="" /></p><p>上面的UI文件产生如下所示的预览。</p>
<div class="table"><table class="generic">
 <thead><tr class="qt-style"><th >Windows XP</th><th >macOS</th><th >Cleanlooks</th></tr></thead>
<tr valign="top" class="odd"><td ><img src="images/designer-form-layout-windowsXP.png" alt="" /></td><td ><img src="images/designer-form-layout-macintosh.png" alt="" /></td><td ><img src="images/designer-form-layout-cleanlooks.png" alt="" /></td></tr>
</table></div>
<a name="splitter-layouts"></a>
<h3 id="splitter-layouts">分裂器布局</h3>
<p>管理窗体上对象布局的另一种常见方法是将它们放在分裂器中。这些分裂器以与常规布局相同的方式水平或垂直排列对象，但也允许用户调整分配给每个对象的空间量。</p>
<p class="centerAlign"><img src="images/designer-splitter-layout.png" alt="" /></p><p>尽管 <a href="../qtwidgets/qsplitter.html">QSplitter</a> 是一个容器小部件，但 <i>Qt Designer</i> 将拆分器对象视为应用于现有小部件的布局。要将一组小部件放置到拆分器中，请按 <a href="designer-widget-mode.html#selectingobjects">此处所述</a> 选择它们，然后通过使用适当的工具栏按钮、键盘快捷键或布局上下文菜单项应用拆分器布局。</p>
<a name="shortcut-keys"></a>
<h2 id="shortcut-keys">快捷键</h2>
<p>除了标准的工具栏和上下文菜单项之外，还有一组键盘快捷键用于在小部件上应用布局。</p>
<a name="layoutshortcuts"></a><div class="table"><table class="generic">
 <thead><tr class="qt-style"><th >布局</th><th >快捷键</th><th >描述</th></tr></thead>
<tr valign="top" class="odd"><td >Horizontal</td><td ><b>Ctrl+1</b></td><td >将选择的对象放置在水平布局中。</td></tr>
<tr valign="top" class="even"><td >Vertical</td><td ><b>Ctrl+2</b></td><td >将选中的对象放置在垂直布局中。</td></tr>
<tr valign="top" class="odd"><td >Grid</td><td ><b>Ctrl+5</b></td><td >将选定的对象置于网格布局中。</td></tr>
<tr valign="top" class="even"><td >Form</td><td ><b>Ctrl+6</b></td><td >将选中的对象置于窗体布局中。</td></tr>
<tr valign="top" class="odd"><td >Horizontal splitter</td><td ><b>Ctrl+3</b></td><td >创建一个水平分裂器，并将所选对象放置其中。</td></tr>
<tr valign="top" class="even"><td >Vertical splitter</td><td ><b>Ctrl+4</b></td><td >创建一个垂直分裂器，并将选中的对象放置其中。</td></tr>
<tr valign="top" class="odd"><td >Adjust size</td><td ><b>Ctrl+J</b></td><td>调整布局的大小，以确保每个子对象有足够的空间显示其内容。有关更多信息，请参见 <a href="../qtwidgets/qwidget.html#adjustSize">QWidget::adjustSize</a>()。</td></tr>
</table></div>
<p><b>注意: </b><b>Ctrl+0</b> 用于打破布局。</p></div>
<!-- @@@designer-layouts.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="designer-widget-mode.html">小部件编辑模式</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="designer-connection-mode.html">信号和槽编辑模式</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2020 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
